<template>
<div>
    <h1>新增菜谱页</h1>
    <table class="table">
        <tr>
            <td>菜谱标题</td>
            <td><input type="text" v-model="data.cainame"></td>
        </tr>

        <tr>
            <td>菜谱封面</td>
            <td>
                <input type="file" @change="upfile">
                <img :src="'https://localhost:7023/'+data.img" style="width: 60px; height: 60px;">
            </td>
        </tr>

        <tr>
            <td>标签</td>
            <td><input type="text" v-model="data.cBiqan"></td>
        </tr>


        <tr>
            <td>分类</td>
            <td>
                <select v-model="data.typeid">
                    <option value="0">请选择</option>
                    <option v-for="d in La" :value="d.tid">{{d.tname}}</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>发布时间</td>
            <td><input type="date" v-model="data.csDate"></td>
        </tr>

        <tr>
            <td>菜谱详情</td>
            <td><input type="text" v-model="data.cMeaages"></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="button" value="添加" @click="Add()"></td>
        </tr>

    </table>
</div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()

onMounted(()=>{
    Xia()
})

const data=ref({
     "id": 0,
  "cainame": "",
  "img": "",
  "cBiqan": "",
  "typeid": 0,
  "csDate": "",
  "cMeaages": ""
})

const Add=()=>{

    if(data.value.cainame==""){
        alert("菜谱标题不能为空值");
        return
    }

    if(data.value.img==""){
        alert("菜谱封面不能为空值");
        return
    }

    if(data.value.cBiqan==""){
        alert("标签不能为空值");
        return
    }

    if(data.value.cMeaages==""){
        alert("菜谱详情不能为空值");
        return
    }

    axios.post("/api/CaiPu/Add",data.value).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("/")
        }else{
            alert("添加失败");
        }
    })
}

const La=ref([{
    "tid": 0,
    "tname": ""
}])

const Xia=()=>{
    axios.get("/api/CaiPu/Xia").then(res=>{
        La.value=res.data
    })
}

const upfile=(e:any)=>{
     var f=e.target.files[0];
     var fd=new FormData();
     fd.append("file",f)

     axios.post("/api/CaiPu/Img",fd).then(res=>{
        data.value.img=res.data
     })
}
        
</script>

<style lang="scss" scoped>

</style>